<!--
*默认没有提交-取消按钮
*有两个slot，一个用于操作按钮，一个用于右边搜索-重置按钮
-->
<template>
  <a-card :title="cardTitle" :bordered="false" :bodyStyle="bodyStyleObj">
    <div class="btn" slot="extra">
      <div v-if="hasextra">
         <a-button @click="cancel" class="cancel" size="large">取消</a-button>
        <a-button v-if="showSave" size="large" @click="save" type="primary">
          提交
        </a-button>
      </div>
    <slot name="through"></slot>
    </div>
    <slot name="form"></slot>
    <slot name="searchButton"></slot>
    <slot></slot>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      bodyStyleObj: {
        'padding-bottom': '100px',
        ' overflow-y': 'scroll'
      }
    }
  },
  props: {
    title: {
      type: String
    },
    showSave:{
      type: Boolean,
      default: true
    },
    hasextra: {
      type: Boolean,
      default: false
    },
    through:{
       type: Boolean,
      default: false
    }
  },
  computed:{
   cardTitle(){
     console.log('title')
    // return this.$route.meta.title
    return '公共组件'
   }
  },
  methods: {
    save() {
      console.log('父级', this.$parent.dataItem)
      this.$parent.save()
    },
    cancel() {
      this.$multiTab.closeCurrentPage()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';
.card {
  margin-bottom: $margin-S3;
  border-radius: 4px;
}
.btn {
  display: flex !important;
  justify-content: space-around !important;
  width: 200px !important;
  .cancel{
    margin-right: 20px;
  }
}
/deep/.ant-card-head-title {
  font-size: 18px !important;
  font-weight: 700 !important;
}
</style>
